<template>
  <div class="LoginStyleBox">
    <div class="LoginStyleRgba">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13945121728%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648033727&t=ab365f5d8bb9c3886613330010e0e9e7"
        alt=""
      />
    </div>
    <div class="LoginFromBox">
      <p class="LoginUserStyleBox"><span class="LoginUserNameIpt">账号:</span><input type="text" v-model="forFrom.phone" class="LoginUserIpt" name=""  placeholder="请你输入账号"></p>
      <p class="LoginPassStyleBox"><span class="LoginPassNameIpt">密码:</span><input type="password" v-model="forFrom.password" class="LoginPassIpt" name="" placeholder="请你输入密码" ></p>
      <p class="LoginCodeStyleBox"><span class="LoginCodeStyleName">验证码:</span><input type="text" class="LoginCodeIpt" name="" placeholder="验证码" ><span @click="LoginCodePass" style="background:#fff; width:auto;height:auto;display:inline-block; marginLeft:10px; borderRadius:5px;" v-html="text"></span></p>
      <p><a-button @click="LoginInterFace" class="LoginStyleBtn" type="primary">登录</a-button></p>
    </div>
  </div>
</template>

<script>
import Axios from 'axios';
export default {
    data() {
      return {
        text:"",
        forFrom:{
          phone:"",//账号
          password:"",//密码
        }
      }
    },
    created() {
      //验证码
      this.LoginCodePass();
      //登录
      this.LoginInterFace();
    },
    methods: {
      //验证码
      async LoginCodePass(){
        let res = await Axios.get("/api/getCode");
        this.text = res.data.data
      },
      //登录
      async LoginInterFace(){
        let res = await Axios.post("/api/login",{...this.forFrom});
        let token =  window.localStorage.getItem("token",res.data.token);
        console.log(res.data.token,"token");
        if(token){
          alert("登录成功")
          this.$router.push("/home")
        }else{
          alert("登录失败")
          this.$router.push("/login")
        }
      }
    },
}
</script>

<style>
.LoginStyleBox {
  width: 100%;
  height: 100%;
}
.LoginStyleRgba {
  width: 1000px;
  height: 600px;
  margin: 50px auto;
}
.LoginFromBox {
  top: 160px;
  right: 330px;
  width: 340px;
  height: 280px;
  border-radius: 20px;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}
.LoginUserIpt {
  width: 260px;
  margin-left: 10px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginPassIpt{
  width: 260px;
  margin-left: 10px;
  margin-top: 10px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginPassTpt {
  width: 260px;
  margin-left: 20px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginStyleBtn {
  width: 260px;
  margin-left: 20px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
  background: #1884f2;
  color: #ffff;
  font-size: 16px;
}
.SecurityCode {
  width: 100px;
  position: absolute;
  top: 160px;
  left: 80px;
  margin-left: 140px;
  width: auto;
  border-radius: 5px;
  height: auto;
  background: rgb(243, 246, 250);
}
.IptCode {
  margin-left: 80px;
  height: 35px;
  width: 130px;
  outline: none;
  padding: 5px;
  border-radius: 5px;
}
.LoginUserNameIpt,.LoginPassNameIpt{
  font-size: 20px;
  padding: 0px 5px;
   font-weight: bold;
}
.LoginCodeStyleName{
   font-size: 15px;
   font-weight: bold;
    padding: 0px 5px;
}
.LoginCodeIpt{
  width: 120px;
  height: 30px;
  outline: none;
  padding: 5px;
  margin-left: 10px;
  border-radius: 5px;
}.LoginStyleBtn{
  width: 220px;
  margin-left: 70px;
  top: 180px;
  position: absolute;
}
</style>